<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        table tr th,
        table tr td {
            border: 1px solid #0094ff;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne" name="sex" value="男" />男
        <input type="radio" id="sexTwo" checked name="sex" value="女" />女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br />
    <table cellspacing="0" border="1" width="600px">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        document.querySelector("#add").onclick = function () {

            // console.log(sexDom);
            var nameDom = document.querySelector("#username");
            var ageDom = document.querySelector("#age");
            var sexDom = document.querySelectorAll("input")
            var nameValue = nameDom.value;
            var ageValue = ageDom.value;
            var sexValue;
            // console.log(nameDom.value);
            sexDom.forEach(item => {
                // console.log(item.checked);
                if (item.checked) {
                    sexValue = item.value;
                }
            })
            // function fn() {
            //     for (var i = 0; i < sexDom.length; i++)
            //      {
            //         if (sexDom[i].checked ) {
            //             sexValue = sexDom[i].value;
            //         }
            //     }
            // }
            // fn()
            var tbody = document.querySelector("tbody");
            tbody.innerHTML += `
        <tr>
            <td>${nameValue}</td>
            <td>${sexValue}</td>
            <td>${ageValue}</td>
            <td><button onclick="del(this);">DEL</button></td>
        </tr>
        `
    
        }

        // 删除方法：
        function del(obj){
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr)
        }
    </script>
</body>

</html>